<template>
	<view>
		<view class="zy-status-bar"></view>
		<view class="zy-row-between" style="position: relative; height: 80rpx;">
			<view class="zy-row">
				<slot>
					<zy-arrow-left v-if="!hideBack"></zy-arrow-left>
				</slot>
				<view class="zy-text-white-lg-bold" v-if="leftTitle">{{leftTitle}}</view>
			</view>
			<view class="zy-row">
				<view class="zy-row" @click="onRight2">
					<slot name='right2'>
						<zy-icon :url="getImageUrl(`${rightIcon2}`)" v-if="rightIcon2"></zy-icon>
						<view class="zy-text-white-bold  zy-p" v-if="rightText2">{{rightText2}}</view>
					</slot>
				</view>
				<view class="zy-row" @click="onRight">
					<slot name='right'>
						<zy-icon :url="getImageUrl(`${rightIcon}`)" v-if="rightIcon"></zy-icon>
						<view class="zy-text-white-bold zy-p" v-if="rightText">{{rightText}}</view>
					</slot>
				</view>
			</view>
			
			<view class="zy-row-center zy-text-white-lg-bold" style="position: absolute; z-index: -1;  width: 100%;">
				{{title}}
				<slot name='title'></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"zy-title",
		data() {
			return {
				
			};
		}, 
		props:{
			hideBack:{
				type: Boolean,
				default: () => false
			},
			title:{
				type: String,
				default(){
					return ''
				}
			},
			leftTitle:{
				type: String,
				default(){
					return ''
				}
			},
			rightText:{
				type: String,
				default(){
					return ''
				}
			},
			rightIcon:{
				type: String,
				default(){
					return ''
				}
			},
			rightText2:{
				type: String,
				default(){
					return ''
				}
			},
			rightIcon2:{
				type: String,
				default(){
					return ''
				}
			},
		},
		methods: {
			onRight(){
				this.$emit('right')
			},
			onRight2(){
				this.$emit('right2')
			}
		}
	}
</script>

<style>

</style>